import getIn from '../../../../yali-sdk/utils/getIn';
/*此插件必传参数menuItems和currentIndex，_width为选填，当menuItems每个菜单宽度大于屏幕宽度，自动添加滚动和下拉菜单*/
Component({
    options: {
      multipleSlots: true // 启用多slot支持
    },
    properties: {
        menuItems: {// 导航列表
            type: Array,
            value: undefined,
        },
        currentIndex: {// 当前选中id
            type: Number,
            value: 0,
            observer(newVal, oldVal) {
              if (newVal != oldVal) {
                const toView = newVal == 0 ? `scroll${newVal}` : `scroll${newVal - 1}`;
                this.setData({ toView });
              }
            }
        },
        _width: {// 每个导航元素宽度
          type: String,
          value: '20vw',
        },
        _position: {// 导航条定位
          type: String,
          value: 'fixed',
        },
        _color: {// 单个元素颜色
          type: String,
          value: '#22b6ce',
        }
    },
    data:{
      scroll: false,
      menuShow: false,
      animationData: {},
      barHeight: 0,
      toView: '',
    },
    ready() {
      const window_width = getIn(getApp(), ['globalData', 'window_width']);
      const len = this.data.menuItems.length;
      const query = wx.createSelectorQuery().in(this);
      query.selectAll('.menuItems').boundingClientRect((res) => {
        if (res[0] && (res[0].width * len > window_width)) {
          this.setData({
            scroll: true,
          })
        } 
      }).exec();
        let callSum = 0;
        if (len % 3 != 0) {
            callSum = parseInt(len / 3) + 1;
        } else {
            callSum = parseInt(len / 3);
        }
        const barHeight = 45 * callSum + 30;
        this.setData({ barHeight });
    },
    methods: {
        navbarTap(e) {
            const currentIndex = getIn(e, ['currentTarget', 'dataset', 'idx']);
            const toView = `scroll${currentIndex}`;
            if (!this.data.menuItems || getIn(this.data, ['menuItems', 'size']) == 0) {
                return;
            }
            if (this.data.menuShow) {
              this.hideModal()
            }
            this.setData({ currentIndex, toView });
            this.triggerEvent('menuCallBackAction', currentIndex);
        },
        menuList() {
          this.showModal();
        },
        /**弹出优惠券弹窗**/
        showModal() {
          this.timers && clearTimeout(this.timers);
          const animation = wx.createAnimation({
            duration: 200,
            timingFunction: 'linear',
            delay: 0,
          });
          this.animation = animation;
          animation.translateY(-this.data.barHeight).step();
          this.setData({ animationData: animation.export(), menuShow: true });
          this.times = setTimeout(() => {
            animation.translateY(0).step();
            this.setData({
              animationData: animation.export()
            });
          }, 200);
        },
        // 取消弹出框
        hideModal() {
          this.timers && clearTimeout(this.timers);
          const animation = wx.createAnimation({
            duration: 200,
            timingFunction: 'linear',
            delay: 0,
          });
          this.animation = animation;
          animation.translateY(-this.data.barHeight).step();
          this.setData({ animationData: animation.export() });
          this.times = setTimeout(() => {
            animation.translateY(0).step();
            this.setData({
              animationData: animation.export(),
              menuShow: false
            });
          }, 200);
        },
    },

});
